<template>
  <div>
    <input v-model="name" placeholder="Name" />
    <input v-model="email" placeholder="Email" />
    <button @click="handleAddUser">Add User</button>

    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }} - {{ user.email }}</li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const name = ref('')
const email = ref('')
const users = ref([])

onMounted(async () => {
  window.electronAPI
    .getUsers('')
    .then((result) => {
      // 处理返回的用户数据
      console.log('获取到用户数据:', result)
      users.value = result.users
    })
    .catch((error) => {
      // 处理错误
      console.error('获取用户数据失败:', error)
    })
})

const handleAddUser = async () => {
  if (name.value && email.value) {
    await window.electronAPI.addUser(name.value, email.value)
    window.electronAPI
      .getUsers('')
      .then((result) => {
        // 处理返回的用户数据
        users.value = result.users
      })
      .catch((error) => {
        // 处理错误
        console.error('获取用户数据失败:', error)
      })
    // console.log('users:', users.value)
    name.value = ''
    email.value = ''
  }
}
</script>
